<template>
  <div class="gallery">
    <!-- 主图 -->
    <div class="main-image mb-3">
      <img :src="currentImage" :alt="altText" class="img-fluid rounded" @click="openLightbox">
    </div>
    
    <!-- 缩略图列表 -->
    <div class="thumbnail-list d-flex flex-wrap gap-2">
      <div v-for="(image, index) in images" 
           :key="index"
           class="thumbnail"
           :class="{ active: currentIndex === index }"
           @click="setCurrentImage(index)">
        <img :src="image" :alt="`${altText} ${index + 1}`" class="img-thumbnail">
      </div>
    </div>
    
    <!-- 灯箱 -->
    <div v-if="lightboxOpen" class="lightbox" @click="closeLightbox">
      <div class="lightbox-content" @click.stop>
        <button class="lightbox-close btn-close btn-close-white" @click="closeLightbox"></button>
        <button class="lightbox-nav lightbox-prev" @click="prevImage">
          <i class="fas fa-chevron-left"></i>
        </button>
        <img :src="currentImage" :alt="altText" class="lightbox-image">
        <button class="lightbox-nav lightbox-next" @click="nextImage">
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Gallery',
  props: {
    images: {
      type: Array,
      required: true
    },
    altText: {
      type: String,
      default: 'Gallery image'
    },
    initialIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentIndex: this.initialIndex,
      lightboxOpen: false
    }
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex]
    }
  },
  methods: {
    setCurrentImage(index) {
      this.currentIndex = index
    },
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length
    },
    prevImage() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length
    },
    openLightbox() {
      this.lightboxOpen = true
      document.body.style.overflow = 'hidden'
    },
    closeLightbox() {
      this.lightboxOpen = false
      document.body.style.overflow = 'auto'
    },
    handleKeydown(event) {
      if (!this.lightboxOpen) return
      
      switch(event.key) {
        case 'Escape':
          this.closeLightbox()
          break
        case 'ArrowLeft':
          this.prevImage()
          break
        case 'ArrowRight':
          this.nextImage()
          break
      }
    }
  },
  mounted() {
    document.addEventListener('keydown', this.handleKeydown)
  },
  beforeUnmount() {
    document.removeEventListener('keydown', this.handleKeydown)
    document.body.style.overflow = 'auto'
  }
}
</script>

<style scoped>
.thumbnail {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.thumbnail:hover,
.thumbnail.active {
  opacity: 1;
}

.thumbnail img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1061;
  background: none;
  border: none;
  font-size: 1.5rem;
}

.lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 15px;
  cursor: pointer;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

@media (max-width: 768px) {
  .lightbox-nav {
    width: 40px;
    height: 40px;
    padding: 10px;
  }
  
  .thumbnail img {
    width: 50px;
    height: 50px;
  }
}
</style>